<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px solid orange;
				width: 60%;
				border-collapse: collapse;
				margin: auto;
			}

			table th {
				border: 1px solid orange;
				background-color: bisque;
				padding: 20px;
			}

			table td {
				border: 1px solid orange;
				padding: 20px;
			}

			.cur {
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox" class="checkall" />全选</th>
				<th>ID</th>
				<th>名称</th>
				<th>部门</th>
				<th>手机</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>0</td>
				<td>张三</td>
				<td>研发</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>1</td>
				<td>张三</td>
				<td>研发</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>2</td>
				<td>张三</td>
				<td>研发</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>3</td>
				<td>张三</td>
				<td>研发</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>4</td>
				<td>张三</td>
				<td>研发</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td colspan="5"><button>删除选中</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			//获取所有的tr节点对象（数组）
			var array = document.querySelectorAll('tr');
			array.forEach(function(tr) {
				// console.dir(val);
				tr.addEventListener('mousemove', function() {
					this.className = 'cur';
				});

				tr.addEventListener('mouseout', function() {
					this.className = '';
				});
			})

			//根据标签选择器获取第一个input节点对象
			var checkall = document.querySelector('input');
			checkall.addEventListener('click', function() {
				//根据标签选择器获取所有input节点对象（数组）
				var inputs = document.querySelectorAll('input');
				inputs.forEach(function(val) {
					val.checked = checkall.checked;
				})
			})


			//根据标签选择器获取所有input节点对象（数组）
			//类似数组
			var inputs = document.querySelectorAll('.check');
			//设置checkbox的click事件
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].addEventListener('click', function() {
					//开关(标志位)
					var flag = true;
					//只要操作了其中一个checkbox，就遍历所有的checkbox，查看它们的选中状态
					for (var j = 0; j < inputs.length; j++) {
						console.log(inputs[j].checked);
						if (!inputs[j].checked) {
							flag = false;
							break;
						}
					}
					checkall.checked = flag;
				})
			}
			console.dir(inputs);
			var button = document.querySelector('button');
			//对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
			var arr = Array.from(inputs);
			button.addEventListener('click', function() {
				arr.forEach(function(val, index) {
					//input节点对象
					if (val.checked) {
						//input节点对象的父(td)
						var td = val.parentElement;
						//input节点对象的父(td)的下一个兄弟
						var nextTd = td.nextElementSibling;
						console.log(nextTd.innerHTML);
						//oRemove = object.removeChild(oNode)
						//input节点对象的父(td)的父(tr)
						var tr = td.parentElement;
						//input节点对象的父(td)的父(tr)的父(table)
						var table = tr.parentElement;
						//删除table下选中的tr
						table.removeChild(tr);
						//删除数组中的tr节点对象
						arr.splice(index, 1);
					}
				})
			})
		</script>
	</body>
</html>
